19 - Image de fond

Mettre une image de fond à un élément

Avec CSS il est possible de mettre une image comme décoration en fond d'un élément HTML

Attention : une image de fond CSS n'a aucune existance sémantique côté HTML, c'est uniquement pour de la décoration.

Une image de fond n'a aucune "consistance" et si l'élément ne possède pas de contenu ou de hauteur, l'image ne se verra pas car l'élément aura 0 pixel de hauteur.

            

                /* Élément qui aura une image de fond */
                .element{
                    /* Hauteur pour être sûr de voir l'image de fond */
                    height: 200px;
                    background-image: url('../images/chat.jpg');
                }

            
        

Attention : Le lien de l'image, s'il est relatif, est considéré comme ayant comme emplacement d'origine celui du fichier CSS. Il faut bien penser si le fichier CSS est dans un sous-dossier css/ par exemple à remonter d'un dossier dans l'arborescence avec "../"

Propriétés additionnelles

            

                .element{
                    /* Hauteur pour être sûr de voir l'image de fond */
                    height: 200px;
                    background-image: url('../images/chat.jpg');

                    /* Permet de "fixer" l'image au fond de la page */
                    background-attachment: fixed;

                    /* Change l'effet de répétition de l'image (voir lien plus bas) */
                    background-repeat: no-repeat;

                    /* Change la position de l'image sur le fond */
                    background-position: center center;

                    /* Permet de changer la manière dont l'image recouvre le fond */
                    /* cover = couvre tout l'élément même si l'image ne se voit pas en entière */
                    /* contain = l'image est entièrement visible même si toute la surface n'est pas remplie */
                    background-size: cover;

                }

            
        

En savoir plus sur background-repeat : https://developer.mozilla.org/fr/docs/Web/CSS/background-repeat

En savoir plus sur background-position : https://developer.mozilla.org/fr/docs/Web/CSS/background-position

Il est conseillé de mettre un background-color d'une couleur similaire au background-image pour avoir une alternative de secours si jamais l'image de charge pas :

            

                .element{

                    /* Couleur de fond au cas où l'image de fond ne charge pas (bien mettre une couleur assez proche des couleurs de l'image) */
                    background-color: grey;
                    background-image: url('../images/image-de-fond-sombre.jpg');
                }